<template>
  <el-dialog
    title="会员详情"
    :visible.sync="dialogVisible"
    width="1000px"
    :before-close="handleClose"
    class="member-detail-dialog"
  >
    <div class="dialog-content">

      <h4 class="section-title">账号信息</h4>
      <el-row class="info-block">
        <el-col :span="6" class="avatar-col">
          <img :src="detailData.avatarUrl" class="member-avatar">
        </el-col>
        <el-col :span="18">
          <el-row :gutter="20">
            <el-col :span="12" class="info-item">
              <span class="info-label">会员ID:</span>
              <span class="info-value">{{ detailData.memberId }}</span>
            </el-col>
            <el-col :span="12" class="info-item">
              <span class="info-label">会员昵称:</span>
              <span class="info-value">{{ detailData.memberNickname }}</span>
            </el-col>

            <el-col :span="12" class="info-item">
              <span class="info-label">会员账号:</span>
              <span class="info-value">{{ detailData.memberAccount }}</span>
            </el-col>
            <el-col :span="12" class="info-item">
              <span class="info-label">注册时间:</span>
              <span class="info-value">{{ detailData.registerTime }}</span>
            </el-col>

            <el-col :span="12" class="info-item">
              <span class="info-label">注册来源:</span>
              <span class="info-value">{{ detailData.registerSource }}</span>
            </el-col>
            <el-col :span="12" class="info-item">
              <span class="info-label">会员状态:</span>
              <span class="info-value status-normal">{{ detailData.memberStatusName }}</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <h4 class="section-title">会员信息</h4>
      <el-row :gutter="20">
        <el-col :span="12" class="info-item">
          <span class="info-label">会员性别:</span>
          <span class="info-value">{{ detailData.gender }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="info-label">会员生日:</span>
          <span class="info-value">{{ detailData.birthday }}</span>
        </el-col>
      </el-row>

      <h4 class="section-title">会员权益</h4>
      <el-row :gutter="20">
        <el-col :span="12" class="info-item">
          <span class="info-label">VIP等级:</span>
          <span class="info-value">{{ detailData.vipLevel }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="info-label">SVIP等级:</span>
          <span class="info-value">{{ detailData.svipLevel }}</span>
        </el-col>
      </el-row>

      <h4 class="section-title">会员资产</h4>
      <el-table
        :data="[detailData.assets]"
        border
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#f5f7fa' }"
        class="asset-table"
      >
        <el-table-column prop="cardCount" label="易购卡" align="center" width="150" />
        <el-table-column prop="totalBalance" label="合计余额" align="right" />
        <el-table-column prop="availablePoints" label="可用积分" align="right" />
        <el-table-column prop="availableBalance" label="可用余额" align="right" />
      </el-table>

    </div>

    </el-dialog>
</template>

<script>
// 假设这是你自定义的会员详情组件
export default {
  props: {
    // 控制弹窗是否显示
    visible: {
      type: Boolean,
      default: false
    },
    // 传入的会员ID，用于组件内部请求详情数据
    memberId: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      // 模拟详情数据结构
      detailData: {
        avatarUrl: '/static/member-avatar.png', // 模拟头像
        memberId: '23652632562362',
        memberAccount: '136 3637 3637',
        registerSource: '小程序',
        memberNickname: '这是会员昵称',
        registerTime: '2025-09-04 19:11:20',
        memberStatusName: '正常',

        gender: '男/女/未知',
        birthday: '2022年12月26日',

        vipLevel: '这是等级名称',
        svipLevel: '这是等级名称',

        assets: {
          cardCount: '10张',
          totalBalance: '¥500.00',
          availablePoints: '0.00',
          availableBalance: '¥100000.00'
        }
      },
      loading: false
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
      // 当弹窗打开时，如果传入了 memberId，则加载数据
      if (val && this.memberId) {
        this.getMemberDetail(this.memberId)
      }
    }
  },
  methods: {
    /**
     * @description 关闭弹窗并通知父组件
     */
    handleClose() {
      // 触发父组件的 update:visible 事件来关闭弹窗
      this.$emit('update:visible', false)
    },

    /**
     * @description 模拟请求会员详情数据
     * @param {string|number} id 会员ID
     */
    getMemberDetail(id) {
      this.loading = true
      // 假设调用 API 获取详情
      // this.$api.getMemberDetail(id).then(res => {
      //   this.detailData = res.data
      //   this.loading = false
      // }).catch(() => {
      //   this.loading = false
      // })

      console.log(`正在加载会员 ${id} 的详情...`)
      setTimeout(() => {
        this.loading = false
        // 实际应用中将 API 返回的数据赋值给 this.detailData
        this.$message.success('会员详情加载成功')
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.member-detail-dialog {
  // 保持 Element UI dialog 的默认样式，仅对内容进行调整

  .dialog-content {
    padding: 0 10px;
  }

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin: 20px 0 15px 0;
    padding-left: 10px;
    border-left: 4px solid #409EFF; /* Element UI 主题色 */
  }

  /* 账号信息块样式 */
  .info-block {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
  }

  .avatar-col {
    display: flex;
    justify-content: center;
    padding-top: 10px;
  }

  .member-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #EBEEF5;
  }

  /* 通用信息项样式 */
  .info-item {
    line-height: 2;
    font-size: 14px;
    margin-bottom: 5px;

    .info-label {
      color: #909399;
      display: inline-block;
      width: 80px; /* 固定标签宽度以对齐 */
      text-align: right;
      margin-right: 8px;
    }
    .info-value {
      color: #303133;
      font-weight: 500;
    }
    .status-normal {
      color: #67C23A; /* 绿色表示正常 */
    }
  }

  /* 会员资产表格样式 */
  .asset-table {
      margin-top: 10px;
      // 确保金额列右对齐
      ::v-deep .el-table__cell:nth-child(2) .cell,
      ::v-deep .el-table__cell:nth-child(3) .cell,
      ::v-deep .el-table__cell:nth-child(4) .cell {
          text-align: right;
      }
  }
}
</style>
